/*eslint-disable*/
// eslint-disable-next-line
import '../App.css';
import '../style/public.css';
import React, { Component }  from 'react';
import { BrowserRouter as RouterL, Route, Link } from "react-router-dom";
import {
    Layout, Menu, Breadcrumb, Icon,
} from 'antd';
import Router from './router/index'
import Option from '../pages/page/option'
import Echart from '../pages/page/option/echart'
import Form from '../pages/page/option/form'
const {
    Header, Content, Footer, Sider,
} = Layout;
const SubMenu = Menu.SubMenu;
const AppRouter = () => (
    <RouterL>
        <div>
            <Route path="/option1" component={Index} />
            <Route path="/option2" component={About} />
            <Route path="/user" component={Plan} />
            <Route path="/team" component={Message} />
            <Route path="/file" component={Manage} />
        </div>
    </RouterL>
);
const RouterPath = () => (
    <RouterL>
        <div>
            <Route path="/option1" exact component={Index1} />
            <Route path="/option2" component={About1} />
            <Route path="/user/user1" component={Plan1} />
            <Route path="/user/user2" component={Plan2} />
            <Route path="/user/user3" component={Plan3} />
            <Route path="/team/team1" component={Message1} />
            <Route path="/team/team2" component={Message2} />
            <Route path="/file" component={Manage1} />
        </div>
    </RouterL>
)

// 图表
const Index = () => {return <Option />}

const About = () => {
    return <Echart/>
};

const Plan = () => {
    return <Form/>
};
const Manage = () => <div>
    file
</div>;
const Message = () => <div>
    team
</div>;
const Index1 = () => <div>
    option1
</div>;
const About1 = () => <div>
    option2
</div>;
const Plan1 = () => <div>
    user / user1
</div>;
const Plan2 = () => <div>
    user / user2
</div>;
const Plan3 = () => <div>
    user / user3
</div>;
const Manage1 = () => <div>
    file
</div>;
const Message1 = () => <div>
    team / team1
</div>;
const Message2 = () => <div>
    team / team1
</div>;

class SiderDemo extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({collapsed});
    }

    render() {
        return (
            <Layout style={{minHeight: '100vh'}}>
                <Sider
                    collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse}
                >
                    <div className="header-logo">
                        <Icon type="github" />
                    </div>
                    <RouterL>
                    <Menu theme="dark" mode="inline">
                        {
                            Router.routes.map(function (post, index) {
                                    return post.hasSub ? (
                                        <SubMenu
                                            key={index}
                                            title={<span><Icon type={post.icon}/><span>{post.title}</span></span>}
                                        >
                                            {
                                                post.subMenu.map(function (item1, number) {
                                                    return (
                                                        <Menu.Item key={item1.title}
                                                                   id={item1.title}><Link to={item1.path}>{item1.title}</Link></Menu.Item>
                                                    );
                                                })
                                            }
                                        </SubMenu>
                                    ) : (
                                        <Menu.Item key={index}>
                                            <Link to={post.path}>
                                                <Icon type={post.icon}/>
                                                <span>{post.title}</span>
                                            </Link>
                                        </Menu.Item>
                                    )
                                }
                            )
                        }

                    </Menu>
                    </RouterL>
                </Sider>
                <Layout>
                    <Header style={{background: '#fff', padding: 0}}>
                        <div className='m_l_20'>小蜜蜂财务管理系统</div>
                    </Header>
                    <Content style={{margin: '0 16px'}}>
                        <Breadcrumb style={{margin: '16px 0'}}>
                            <RouterPath/>
                        </Breadcrumb>
                        <div style={{padding: 24, background: '#fff', minHeight: 290}}>
                            <AppRouter/>
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
                        CopyRight ©2019 Created by zj
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}


export default SiderDemo;


